html,
body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}


@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {
    body {
        /* 适配齐刘海 */
        padding-top: 20px;
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);

        /* 适配底部小黑条 */
        padding-bottom: 0;
        padding-bottom: costant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

body {
    color: rgb(var(--foreground-rgb));
    margin: 0;
    padding: 0;
    // background-color: #eeefef;
    height: 100%;
    overflow: auto;
    counter-reset: section;
    font-size: initial !important;
}

body[arco-theme="dark"] {
    .cx-custom-viewpageLine {
        background-color: rgb(19, 19, 19);
    }
}

p {
    margin: 0;
}

div,
span,
img,
p,
header {
    box-sizing: border-box;
}

.ce-block {
    word-break: break-all;
}

.ce-paragraph span {
    // white-space: pre-wrap;
}

// image 图片拖拽缩放样式
.cdx-input.image-tool__caption {
    border: none;
    box-shadow: none;
    text-align: center;
}

.cdx-input.image-tool__caption[contentEditable=true][data-placeholder]:empty:before {
    text-align: center;
    display: inline-block;
    margin-left: -2em;
}

.cdx-quote__text {
    border: none;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    box-shadow: none;
    min-height: auto !important;
    background-color: rgba(0, 0, 0, 0.05);
}

.cdx-quote__caption {
    display: none !important;
}

.ce-code__textarea,
.ce-rawtool__textarea {
    min-height: 4em !important;
    border-radius: 6px;
}

.ce-inline-toolbar__actions {
    text-align: center;
}

.ce-inline-toolbar__actions input[type='color'] {
    border: 1px solid #eee;
    margin: 6px 0 6px 6px;
    background-color: transparent;
    width: 88%;
    box-sizing: border-box;
    cursor: pointer;
}

/* 内联公式样式 */
.inline-math {
    display: inline-block;
    vertical-align: middle;
    padding: 0 2px;
}

.katex {
    font-size: 1.1em;
}

.inline-math .katex-error {
    color: red;
    font-size: 0.9em;
}

.ce-inline-math-tool {
    padding-left: 4px;
    padding-right: 4px;
}

@keyframes loop2 {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-50%, 0);
    }

    70% {
        transform: translate(-50%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes loop3 {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, 0);
    }

    40% {
        transform: translate(-33.333%, 0);
    }

    60% {
        transform: translate(-33.333%, 0);
    }

    80% {
        transform: translate(-66.666%, 0);
    }

    100% {
        transform: translate(-66.666%, 0);
    }
}

.colorBgContainer {
    background-color: var(--color-bg-1);
}

.colorBgContainer2 {
    background-color: var(--color-bg-2)
}

.colorTextLabel {
    color: var(--color-text-2)
}

.colorFillContentHover {
    color: var(--color-text-4);
}

.pubCol {
    color: var(--color-text-1);
}

.colorTextBase {
    color: var(--color-text-1);
}

.borderRadius {
    border-radius: 6px !important;
}

.colLink {
    color: rgb(var(--arcoblue-6));
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flx-ce-ce {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flx-ce-sta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flx-ce-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flx-ce-end {
    display: flex;
    align-items: center;
    justify-content: end;
}

.arco-dropdown-list-wrapper {
    max-height: none !important;
}

@media screen and (max-width: 767px) {
    .initModal {
        .arco-modal {
            max-width: calc(100vw - 20px);
        }
    }
}

.cx-custom-viewpageLine {
    width: 100%;
    transform: scaleX(2);
    padding: 10px 0;
    margin: 16px auto;
    height: 25px;
    box-sizing: content-box;
    background-size: 6px 6px;
    background-clip: content-box;
    background-color: rgb(234, 235, 235);
    pointer-events: auto;
    z-index: 22;
}